<template>
  <vue-chart class="chart" :option="chartOption" autoresize />
</template>

<script>
// import { use } from 'echarts/core'
// import { CanvasRenderer } from 'echarts/renderers'
// import { ScatterChart, EffectScatterChart } from 'echarts/charts'
// import { TitleComponent, TooltipComponent, GeoComponent } from 'echarts/components'
import { cities, geoCoordMap } from '../../mod/map'
import { conbinaMapData } from '../../utils/index'
import 'echarts/extension/bmap/bmap'
// use([CanvasRenderer, ScatterChart, EffectScatterChart, TitleComponent, TooltipComponent, GeoComponent])

export default {
  name: 'SalesMap',
  data() {
    const mapData = cities && geoCoordMap ? conbinaMapData(cities, geoCoordMap) : []
    const sortedCities = cities ? cities.sort((a, b) => b.value - a.value) : []
    const topData = cities && geoCoordMap ? conbinaMapData(sortedCities, geoCoordMap).slice(0, 10) : []

    return {
      chartOption: {
        title: {
          text: '标题',
          subtext: '销售趋势统计',
          sublink: 'https://www.baidu.com',
          left: 'center'
        },
        tooltip: {},
        geo: {
          map: 'china', // 地图类型
          roam: false, // 缩放
          center: [104.114129, 37.550339], // 地图中心
          zoom: 5, // 地图缩放比例
          itemStyle: {
            areaColor: '#f3f3f3', // 区域颜色
            borderColor: '#fefefe' // 区域边框颜色
          },
          emphasis: {
            itemStyle: {
              areaColor: '#f4f4f4' // 区域颜色
            }
          }
        },
        series: [
          {
            name: '销售额', // 鼠标移入显示标题
            type: 'scatter', // 散点图
            // rect（默认的二维直角坐标系）、polar（极坐标系）、geo（地理坐标系            coordinateSystem: 'geo',
            data: mapData,
            encode: {
              value: 2 // 对应数据第2列
            },
            itemStyle: {
              color: 'purple' // 点的颜色
            },
            symbolSize: function (val) {
              return val[2] / 10 // 点的大小
            },
            label: {
              show: false, // 显示的字隐藏
              position: 'right', // 显示的位置
              // formatter: '{b}' // 显示的内容
              formatter: function (v) {
                return `${v.data.name} - ${v.data.value[2]}`
              }
            },
            // 鼠标移入显示
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: 'Top 10',
            type: 'effectScatter', // 涟漪效果
            coordinateSystem: 'geo', // 地理坐标系
            data: topData,
            symbolSize: function (val) {
              return val[2] / 10 // 点的大小
            },
            encode: {
              value: 2 // 对应数据第2列
            },
            label: {
              show: true, // 显示的字隐藏
              position: 'right', // 显示的位置
              formatter: '{b}' // 显示的内容
            },
            hoverAnimation: true,
            rippleEffect: {
              brushType: 'stroke' // 波纹的效果 空心波纹
            },
            itemStyle: {
              color: 'purple', // 点的颜色
              shadowBlur: 10, // 点的阴影
              shadowColor: '#333' // 点的阴影颜色
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>
